<!-- 首页 -->
<template>
	<view class="bg">
		<cu-custom bgColor="bg-gradual-pink" :isBack="false"><block slot="content">异性匹配</block></cu-custom> 
		<mescroll-uni ref="mescrollGameRef" height="100%" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
			<view class="card-list">
				<view class="card-item" v-for="(qun, index) in dataList" :key="index">
					<view class="card-left">
						<view class="card-title">{{qun.title}}</view>
						<view class="card-text">剩余男生{{qun.nan}}人</view>
						<view class="card-text">剩余女生{{qun.nv}}人</view>
					</view>
					<view class="card-right">
						<view class="card-tip">已参加{{qun.nn}}人</view>
						<view class="play-btn" @click="play(qun)">立即匹配</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
		
		<loading text="努力匹配中.." mask="true" click="false" ref="loading"></loading>
		<user-auth></user-auth>
		<coin-popup></coin-popup>
		<cash-popup></cash-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
import {mapState} from 'vuex';
export default {
	mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
	components: {
		
	},
	props:{
		
	},
	data() {
		return {
			CustomBar: this.CustomBar, 
			upOption:{
				auto:false, // 不自动加载
				// page: {
				// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
				// 	size: 10 // 每页数据的数量
				// },
				noMoreSize: 0, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty:{
			        icon: '/static/mescroll-empty.png',
					tip: '~ 暂无数据 ~', // 提示
					// btnText: '去看看'
				},
				toTop: {
					right: 40,
					width: 80,
					bottom: 200,
				},
				bgColor: '#faf1f1',
				textColor: '#606266',
			    textNoMore:'没有更多了'
			},
			gameList: [],
			qunTopicList: [],
			dataList: [],
			list: [
				'进群后如果要私加好友请自行斟酌',
				'注意分辨',
				'谨防上当受骗',
				'本小程序概不承担责任！！！',
			]
		};
	},
	created() {
		uni.$on('indexgame',this.query);
	},
	destroyed() {
		// 注销全局配置监听
		uni.$off('indexgame');
	},
	computed: {
		...mapState(['vuex_user','vuex_query']),
	},
	methods: {
		query(e) {
			this.mescroll.resetUpScroll();
		},
		downCallback(mescroll) {
			mescroll.endSuccess();
			mescroll.resetUpScroll();
		},
		async upCallback(mescroll) {
			this.$u.get('/wq/qun/getList',{
				pageNum: mescroll.num,
				pageSize: mescroll.size,
			}).then(res => {
				mescroll.endSuccess(res.rows.length);
				if (mescroll.num == 1) {
					this.dataList = res.rows;
				} else {
					this.dataList = this.dataList.concat(res.rows);
				}
			}).catch(err => {
				mescroll.endErr();
			});
		},
		play(e) {
			this.judgeLogin(() => {
				this.addJoin(e);
			});
		},
		addJoin(e) {
			this.$refs.loading.open();
			this.$u.post('/wq/qun/join',{
				id: e.id,
			}).then(res => {
				this.$refs.loading.close();
				var roomId = res.data.roomId;
				this.$u.route({
					url: 'packgeMine/pages/chat/chat',
					params: {
						roomId: roomId,
					}
				});
			}).catch(err => {
				this.$refs.loading.close();
			});
		},
		
	}
}; 
</script>

<style lang="scss" scoped>
	.bg {
		background-color: #faf1f1;
	}
	.card-list {
		padding: 10px;
	}
	.card-item {
		background-color: #fff;
		padding: 10px;
		display: flex;
		border: 1px solid #ddd;
		margin-bottom: 10px;
		border-radius: 5px;
	}
	.card-list .card-item:last-child {
		margin-bottom: 0;
	}
	
	.card-left {
		flex: 1;
	}
	.card-right {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.card-title {
		font-weight: bold;
		font-size: 32rpx;
	}
	.card-text {
		margin-top: 5px;
		font-size: 26rpx;
	}
	.card-tip {
		font-size: 26rpx;
		margin-bottom: 5px;
	}
	.play-btn {
		border: 1px solid #ddd;
		padding: 5px 10px;
		border-radius: 5px;
		font-size: 26rpx;
	}
</style>
